<!DOCTYPE html>
<html class="x-admin-sm">

	<head>
		<meta charset="UTF-8">
		<title>欢迎页面-X-admin2.2</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/xadmin.css">
		<link rel="stylesheet" href="css/global.css" />
		<script src="./lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/xadmin.js"></script>
	</head>   
	<body>
		<div class="x-nav">
			<span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
			<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
				<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
		</div>
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card" id="saveTr">
						<div class="layui-card-body ">
						</div>
						<div class="layui-card-body layui-table-body layui-table-main">
							<table class="layui-table layui-form">
								<thead>
									<tr>
										<th>用户名</th>
										<th>操作</th>
										<th>方法名</th>
										<th>参数</th>
										<th>ip地址</th>
										<th>操作时间</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(log, index) in logTemp">
										<td>{{ log.username }}</td>
										<td>{{ log.operation }}</td>
										<td>{{ log.method }}</td>
										<td>{{ log.params }}</td>
										<td>{{ log.ip }}</td>
										<td>{{ log.createDate }}</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="paging" id="pageHelper">
							<a href="#" @click="first" title="">首</a>
							<a id="backpage" @click="last" href="#" title="">&lt;</a>
							<a id="nextpage" href="#" @click="next" title="">&gt;</a>
							<a href="#" @click="end" title="">末</a>
							 <div class="layui-inline layui-show-xs-block">
									<input type="text" id="num" size="1" style="height: 25px;"  class="layui-input">
								</div> 
								<a href="#" @click="tz" title="">跳转</a>
							 共：<span id="sp">{{this.totalPage}}</span>页
							<div class="clear"></div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="./js/vue.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.cookie.js"></script>
		<script src="js/pageHelp.js"></script>
		<script>
			const saveTr = new Vue({
				el: "#saveTr",
				data: {
					logTemp: [], //不变的数据，获取的所有数据
					page: 1, //当前页
					totalPage: 0, //总页数
					pageArr: [] //中间值，循环所用的数据
				},
				methods: {
					//首页
					first: function() {
						this.page = 1;
						this.logTemp = pageHelp(this.pageArr, 11, 1);
					},
					//上一页
					last: function() {
						this.page = this.page - 1;
						if(this.page <= 1) {
							layer.msg("已经第一页了")
							this.page=1;
						}
						this.logTemp = pageHelp(this.pageArr, 11, this.page);
					},
					//下一页
					next: function() {
						this.page = this.page + 1;
						console.log(this.page)
						if(this.page >= this.totalPage) {
						layer.msg("已经最后一页了")
							this.page=this.totalPage;
						}
						this.logTemp = pageHelp(this.pageArr, 11, this.page);
					},
					//末页
					end: function() {
						this.page = this.totalPage;
						this.logTemp = pageHelp(this.pageArr, 11, this.totalPage)
						console.log(this.page);
					},
					
					//跳转页面
					tz: function() {
						var num=$("#num").val();
						if(num>this.totalPage||num<1){
						layer.msg("请输入正确的页数")	
						$("#num").val("");
						return false;
						}
						this.logTemp = pageHelp(this.pageArr, 11, num)
					}

				},
				created() {
					let _this = this;
					axios.defaults.headers.common["token2"] = $.cookie("token2");
					axios.get("http://localhost:9095/admin/sysUser/selectSyslog").then(function(response) {
						_this.logTemp = response.data.data;
						console.log(_this.logTemp)
						_this.pageArr = _this.logTemp; //数据长度
						_this.totalPage = Math.ceil(_this.logTemp.length / 11) //总页数
						_this.first();

					});
				}

			})
		</script>

	</body>
	<script>
		layui.use(['laydate', 'form'], function() {
			var laydate = layui.laydate;
			var form = layui.form;

			// 监听全选
			form.on('checkbox(checkall)', function(data) {

				if(data.elem.checked) {
					$('tbody input').prop('checked', true);
				} else {
					$('tbody input').prop('checked', false);
				}
				form.render('checkbox');
			});
		});
	</script>

</html>